<template>
  <div class="box">
    <h3>{{name2}} {{count}}</h3>
    <button @click="handleAddClick">+</button>
    <button @click="handleMinusClick">-</button>
  </div>
</template>

<script>
export default {
  name: "OneBox",
  props:{
    num:Number,
    name:String
  },
  data() {
    return {
      count: this.num,
      name2:this.name
    }
  },
  methods:{
    emits:['add','minus'],
    handleAddClick(){
      this.count++
      this.$emit('add')
    },
    handleMinusClick(){
      this.count--
      this.$emit('minus')
    }
  }
}
</script>

<style scoped>
.box {
  border: 3px solid black;
  width: 120px;
  height: 120px;
  text-align: center;
}
h3{
  font-size: 30px;
}

</style>